<template>
  <div class='header'>
      <div class='header-left'>
        <div class='iconfont back-icon'>&#xe624;</div>
      </div>
      <div class='header-input'>
        <span class='iconfont '>&#xe632;</span>
        <input type="text" placeholder="输入城市/景点/游玩主题">
      </div>
      <router-link to='/city'>
        <div class='header-right'>
          <span class='cityName'>{{this.city}}</span>
          <span class='iconfont arrow-icon'>&#xe64a;</span>
        </div>
      </router-link>
  </div>
</template>

<script>
import { mapState, mapGetters } from "vuex";
export default {
  name: "HomeHeader",
  data() {
    return {};
  },
  computed: {
    ...mapState(["city"]),
    ...mapGetters(["doubleCity"])
  },
  methods: {},
  components: {}
};
//  html 的font-size设置成了50px 1rem=50px,1px=0.02rem,设计稿是2倍像素
//  设计稿86px,实际写43px,转换就是0.86rem
</script>

<style lang='stylus' scoped>
@import '~styles/mixin.stylus'
@import '~styles/variables'
.header
  display flex
  line-height $headerHeight
  background $bgColor
  color #fff
  .header-left
    width 0.64 rem
    float left
    .back-icon
      text-align center
      font-size 0.4rem
  .header-input
    flex 1
    height 0.64rem
    line-height 0.64rem
    margin-left 0.12rem
    padding-left 0.12rem
    margin-top 0.12 rem
    background #fff
    border-radius 0.1 rem
    color #ccc
    &>input
      width 85%
      margin-top -0.12 rem
      vertical-align middle
      font-size 0.26rem
      color #ccc
  .header-right
    padding-left 0.1rem
    float right
    text-align center
    color #fff
    .cityName
      display inline-block
      vertical-align middle
      margin-top -0.1rem
      line-height normal
      ellipsis()
    .arrow-icon
      font-sze 0.24rem
      margin-left -0.02rem
      margin-right 0.08rem
</style>
